<template>
	<view>
		<Swiper />
	</view>
	<view>
		<uni-notice-bar show-icon scrollable :text="text" />
	</view>
	<view>
		<uni-grid :column="3" :highlight="true">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;" @click="navigateToPage(index)">
					<uni-icons custom-prefix="iconfont" :type="item.iconType" :size="30" color="#409EFF" />
					<text class="text">{{ item.text }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import Swiper from "../../components/swiper/swiper.vue"
	export default {
		data() {
			return {
				text: "",
				list: [{
						iconType: 'icon-weixiuguanli', // uni-icon 的类型，维修管理
						text: '维修管理',
					},
					{
						iconType: 'icon-flow-log', // uni-icon 的类型，流程日志
						text: '流程日志',
					},
					{
						iconType: 'icon-yujing_', // uni-icon 的类型，预警告警
						text: '预警告警',
					},
					{
						iconType: 'icon-daiban', // uni-icon 的类型，消息代办
						text: '消息待办',
					},
					{
						iconType: 'icon-gerenzhongxin', // uni-icon 的类型，消息代办
						text: '个人中心',
					}
				]
			}
		},
		components: {
			Swiper
		},
		methods: {
			navigateToPage(index) {
				// console.log(index);
				// 根据点击的宫格索引执行相应的导航操作
				switch (index) {
					case 0:
						uni.navigateTo({
							url:"/pages/driverRepairManage/driverRepairManage"
						})
						break;
					case 1:
						uni.navigateTo({
							url:"/pages/driverProcessLog/driverProcessLog"
						})
						break;
					case 2:
						uni.navigateTo({
							url:"/pages/driverWarningAlarm/driverWarningAlarm"
						})
						break;
					case 3:
						uni.navigateTo({
							url:"/pages/driverPending/driverPending"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/personalCentre/personalCentre",
						})
						break;
					default:
						break;
				}
			},
			getTodoUndownNum() {
					uni.request({
						url: "http://localhost:8088/getTodoUndoneNumber?userId=" + localStorage.getItem("userId"),
						method: "GET",
						success: (res) => {
							if (res.data.code === '0') {
								const num = res.data.data;
								const string1 = "您有";
								const string2 = "条待办未处理";
								this.text = `${string1} ${num} ${string2}`; // 修正了变量名
							} else {
								// 处理请求失败的情况
								console.error('请求失败:', res.data);
							}
						},
						fail: (error) => {
							// 处理请求失败的情况
							console.error('请求失败:', error);
						}
					});
				}
			},
			created() {
				this.getTodoUndownNum();
			}
		}
</script>

<style lang="scss">
	.container {
		/* #ifndef APP-NVUE */
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		/* #endif */
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>